<PageHeader as |p|>
  <p.levelLeft>
    <h1 class="title is-3">
      Hash data
    </h1>
  </p.levelLeft>
</PageHeader>

{{#if @sum}}
  <div class="box is-sideless is-fullwidth is-marginless">
    <div class="field">
      <label for="sum" class="is-input">Sum</label>
      <div class="control">
        <textarea readonly class="textarea" id="sum" data-test-tools-input="sum">{{@sum}}</textarea>
      </div>
    </div>
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      <CopyButton @clipboardText={{@sum}} @class="button is-primary" @buttonType="button" @success={{action (set-flash-message "Hashed data copied!")}}>
      Copy
      </CopyButton>
    </div>
    <div class="control">
      <button {{on "click" this.onClear}} type="button" class="button" data-test-tools-back=true>
        Back
      </button>
    </div>
  </div>
{{else}}
  <div class="box is-sideless is-fullwidth is-marginless">
    <MessageError @errors={{@errors}} />
    <div class="field">
      <label for="input" class="is-label">
        Input
      </label>
      <div class="control">
        <Textarea @id="input-hash" @name="input" @value={{@input}} class="textarea" data-test-tools-input="hash-input" />
        <B64Toggle @value={{@input}} @isInput={{false}} @data-test-tools-b64-toggle="input" />
      </div>
    </div>
    <div class="field is-horizontal">
      <div class="field-body">
        <div class="field">
          <label for="algorithm" class="is-label">Algorithm</label>
          <div class="control is-expanded">
            <div class="select is-fullwidth">
              <select
                name="algorithm"
                id="algorithm"
                onchange={{action (mut @algorithm) value="target.value"}}
              >
                {{#each (sha2-digest-sizes) as |algo|}}
                  <option selected={{if @algorithm (eq @algorithm algo)}} value={{algo}}>
                    {{algo}}
                  </option>
                {{/each}}
              </select>
            </div>
          </div>
        </div>
        <div class="field">
          <label for="format" class="is-label"> Output format </label>
          <div class="control is-expanded">
            <div class="select is-fullwidth">
              <select
                 name="format"
                 id="format"
                 onchange={{action (mut @format) value="target.value"}}
              >
                {{#each (array 'base64' 'hex') as |formatOption|}}
                  <option selected={{if @format (eq @format formatOption)}} value={{formatOption}}>
                    {{formatOption}}
                  </option>
                {{/each}}
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      <button
         type="submit"
         class="button is-primary"
         data-test-tools-submit="true"
         >
         Hash
      </button>
    </div>
  </div>
{{/if}}
